<template>
  <div class="font-sans bg-gray-50 min-h-screen">
    <!-- 主内容区 -->
    <main class="container mx-auto pt-2 pb-12 px-4">
      <!-- 顶部通知栏 - 跑马灯 -->
      <div class="bg-accent1/80 rounded-lg p-3 mb-8 shadow-sm overflow-hidden">
        <marquee behavior="scroll" direction="left" scrollamount="12" class="text-gray-800 flex items-center">
          <i class="fas fa-bullhorn text-accent4 mr-3"></i>
          <span class="font-semibold">系统通知：</span> {{ runningNotice }}
        </marquee>
      </div>

      <!-- 主要内容区域 -->
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">

        <!-- 左侧边栏 -->
        <div class="lg:col-span-3 space-y-6">
          <!-- 广告卡片 -->
          <AdCarousel/>
          <!-- 取件指南 -->
          <pickup-guide/>
        </div>

        <!-- 中间内容区 -->
        <div class="lg:col-span-6 space-y-6">
          <!-- 我的发布 -->
          <my-parcels/>
        </div>

        <!-- 右侧边栏 -->
        <div class="lg:col-span-3 space-y-6">
          <!-- 已完成包裹 -->
          <completed-parcels/>
          <!-- 联系客服 -->
          <contact-service/>
        </div>

      </div>
    </main>
  </div>
</template>

<script>
import AdCarousel from "@/components/AdCarousel.vue";
import PickupGuide from "@/components/PickupGuide.vue"; // 引入新组件
import CompletedParcels from "@/components/CompletedParcels.vue"; // 引入新组件
import ContactService from "@/components/ContactService.vue"; // 新增：引入联系客服组件
import MyParcels from "@/components/MyParcels.vue"; // 引入我的发布组件

export default {
  name: 'DeliveryManagement',
  components: {AdCarousel, PickupGuide, CompletedParcels, ContactService, MyParcels}, // 注册我的发布组件
  data() {
    return {
      announcements: [
        {title: '系统维护通知', date: '2023-10-01'},
        {title: '新功能上线', date: '2023-09-25'},
        {title: '国庆假期服务安排', date: '2023-09-20'}
      ],

      currentPage: 1,
      itemsPerPage: 2,
      runningNotice: '欢迎使用戴拿快递管理系统！国庆期间（10月1日-7日）正常服务，部分偏远地区可能延迟，如有任何问题，请联系客服400-123-4567。'
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.completedParcels.length / this.itemsPerPage);
    },
  },
  methods: {
  }
};
</script>

<style scoped>
/* 添加额外样式 */
</style>
